<%@ page language="java" contentType="text/html; charset=UTF8"
    pageEncoding="UTF8"%>
    <%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
    <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<title>Na`Vi AppStore</title>
<script src="references/js/jquery-2.1.0.min.js">
</script>

<script type="text/javascript">

	var totalpage=1;
	var category=$('#category').val();
	var sortby=$('#sortby').val();
	var pricefilter =$('#pricefilter').val();
	var numberinpage=$('#numberinpage').val();
	var currentPage = $('#currentPage').val();
	
	
	
	function onFilterChange(){
		category=$('#category').val();
		sortby=$('#sortby').val();
		pricefilter =$('#pricefilter').val();
		numberinpage=$('#numberinpage').val();
		getApp(1);
		getPagination();
	}
	
	function deleteAppAction(i){
		if (confirm("Delete ?")) {
		$.ajax({
	        type: "POST",
	        url: "/Struts_1.3_WebApp_FrameWork/deleteAppAction.jms",
	        data: {
	            appid: i
	        }
	        })
	    .done(function (msg) {
	           alert(msg);
	           getApp($("#currentPage").val());
	        });
		}
	}
	
	function getPagination(){
		$.ajax({
	        type: "POST",
	        url: "/Struts_1.3_WebApp_FrameWork/getAppTotalPageAction.jms",
	        data: {
	            category: category,
	            pricefilter: pricefilter,
	            numberinpage: numberinpage,
	        }
	        })
	    .done(function (msg) {
	            totalpage = msg;
	            $("#totalPage").html(totalpage);
	        });
	}
	function getApp(i){
		if(i>totalpage){
			i=totalpage;
		}
		if(i<1){
			i=1;
		}
		if(i==null||i==""){
			i=1;
		}
		$("#currentPage").val(i);
	$.ajax({
        type: "POST",
        url: "/Struts_1.3_WebApp_FrameWork/getAppListAction.jms",
        data: {
            category: category,
            sortby: sortby,
            pricefilter: pricefilter,
            numberinpage: numberinpage,
            pagenumber: i
        }
        })
    .done(function (msg) {
    	if(msg==""||msg==null){
    		$('#list-app-content').html("<p style='text-align:center' class='no-search-result'>No Search</p>")
    		$('ul.da-thumbs > li').hoverdir();
    	}else{
    	    $('#list-app-content').html(msg);
            $('ul.da-thumbs > li').hoverdir();
    	}
            
        });
	}
	$(document).ready(function(){
		getApp(1);
		getPagination();
	});
	
</script>
</head>
<body>
	<tiles:insertTemplate template="/pages/masterpage/masterPage.jsp">
		<tiles:putAttribute name="body">
			<div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="panel-title">App Detail</h3>
      </div>
      <div class="panel-body"  style="padding:0px;padding-top:10px;padding-bottom:10px">
      
		<div class="list-app-filter">
		 
        <label  class="col-sm-1" style="margin-top:8px"> Category</label>
        			 <div class="col-sm-2">
			<select id="category" onchange="onFilterChange();" class="form-control">
				<option value="All">All</option>
				<option value="OS">OS</option>
				<option value="Security">Security</option>
				<option value="Game">Game</option>
				<option value="Office">Office</option>
				<option value="Developer">Developer</option>
				<option value="Ebook">Ebook</option>
				<option value="Other">Other</option>
			</select>
			</div>
			    <label  class="col-sm-1" style="margin-top:8px"> Short By</label>
        			 <div class="col-sm-2">
			<select id="sortby" onchange="onFilterChange();" class="form-control">
				<option value="dateUpload">Date</option>
				<option value="numberOfDownload">Download</option>
				<option value="appname">Name</option>
			</select>
			</div>
			    <label  class="col-sm-1" style="margin-top:8px"> Price</label>
        			 <div class="col-sm-2">
			<select id="pricefilter" onchange="onFilterChange();" class="form-control">
				<option value="all">All</option>
				<option value="free">Free</option>
				<option value="notfree">Fee</option>
			</select>
			</div>
			 <label  class="col-sm-1" style="margin-top:8px"> Show</label>
			  <div class="col-sm-2">
			<select id="numberinpage" onchange="onFilterChange();" class="form-control">
				<option value="12">12</option>
				<option value="24">24</option>
				<option value="36">36</option>
			</select></div>
		</div>
		
		<!-- List App show here -->
		      
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    
                    <div id = "list-app-content">
                            
                            </div>
                            
                            </div></div>
                            
		<div class="list-app-pagination">
		<br><br>
		<button id="firstPage"onclick="getApp(1)" class="btn btn-default btn-xs">First</button>
		<button id="prevPage"onclick="getApp($('#currentPage').val()-1)" class="btn btn-default btn-xs">Prev</button>
		<input type="number" id="currentPage">
		<button id="go" onclick="getApp($('#currentPage').val())" class="btn btn-default btn-xs">Go</button>
		<button id="nextPage"onclick="getApp(parseFloat($('#currentPage').val())+1)" class="btn btn-default btn-xs">Next</button>
		<button id="lastPage"onclick="getApp(totalpage)" class="btn btn-default btn-xs">Last</button>

		
	
		
		</div>
		<div id="downloadLink"></div>
    </div>
		</tiles:putAttribute>
	</tiles:insertTemplate>
</body>
</html>